<!DOCTYPE html>
<html lang="cn" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>用户注册表单</title>
    <script src="axios.min.js"></script>
    <script src="vue.global.js"></script>
</head>
<body>
<h2>用户注册</h2>
<div id="app">
    <div>
        <label for="email">邮箱：</label>
        <input type="email" id="email"  value="" name="account" required>
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required>
    </div>
    <div>
        <label for="password2">重复：</label>
        <input type="password" id="password2" name="password2" required>
    </div>
    <div>
        <label for="nickname">昵称：</label>
        <input type="text" id="nickname" name="nickname" required>
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" required>
    </div>
    <div>
        <label for="sex">性别：</label>
        <select id="sex" name="sex" required>
            <option value="0">男</option>
            <option value="1">女</option>
            <!-- 根据需要可以添加其他性别选项 -->
        </select>
    </div>
    <div>
        <label for="phone">电话：</label>
        <input type="tel" id="phone" name="phone" required>
    </div>
    <div>
        <label for="address">地址：</label>
        <input type="text" id="address" name="address" required>
    </div>
    <div>
        <button v-on:click="registration()">注册</button>
    </div>
</div>
<script>
    <!--定义app对象-->
    const app = {
        //属性
        data() {
            return {}
        },
        //功能和行为
        methods: {
            //用户注册
            registration: function () {
                console.log("开始用户注册！")
                //异步注册
                axios({
                    method: 'post',
                    url: '/registration',
                    data: {
                        email:document.getElementById("email").value,
                        password: document.getElementById("password").value,
                        password2: document.getElementById("password2").value,
                        nickname: document.getElementById("nickname").value,
                        sex: document.getElementById("sex").value,
                        age: document.getElementById("age").value,
                        phone: document.getElementById("phone").value,
                        address: document.getElementById("address").value
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("注册成功！")
                    } else {
                        alert("注册失败，理由：" + response.data)
                    }
                })
            }

        },
        //启动和构造
        mounted() {
            console.log("vue启动成功！")
        }
    }

    //启动Vue
    Vue.createApp(app).mount("#app")
</script>
</body>
</html>